<style>
    .demand-content .pie-panel-body {
        height: 260px;
    }

    .dt-header .dt-header-inner .dt-row-center .dt-header-cell {
        line-height: 2.425;
    }

    .matrix-slider.rzslider {
        margin: 0;
    }

    .matrix-slider.rzslider .rz-pointer {
        width: 8px;
        height: 4px;
        top: auto;
        /* to remove the default positioning */
        bottom: 0;
        background-color: #337ab7;
        border-bottom-left-radius: 10px;
        border-top-left-radius: 1px;
        border-bottom-right-radius: 10px;
        border-top-right-radius: 1px;
    }

    .matrix-slider.rzslider .rz-tick {
        width: 1px;
        height: 10px;
        margin-left: 4px;
        border-radius: 0;
        top: -1px;
    }

    .matrix-slider.rzslider .rz-pointer:after {
        display: none;
    }

    .matrix-slider.rzslider .rz-bubble {
        bottom: 14px;
    }

    .matrix-slider.rzslider .rz-limit {
        font-weight: bold;
        color: #337ab7;
    }

    .matrix-slider.rzslider .rz-tick.rz-selected {
        background: #337ab7;
    }

    [ng-dropover] {
        display: inline-block;
    }

    .ngdo-contents {
        border: 1px solid #23b7e5;
        border-radius: 10px;
        height: 100px;
        width: 200px;
        background-color: white;
        padding: 10px;
        box-shadow: 0px 5px 6px #888888;
        display: none;
    }

    .wrapper {
        text-align: center;
        margin-top: 30px;
    }

    div.arrowed:before,
    div.arrowed:after {
        content: ' ';
        height: 0;
        position: absolute;
        width: 0;
        border: 10px solid transparent;
    }

    div.arrowed:before {
        border-bottom-color: white;
        position: absolute;
        top: -19px;
        left: 20px;
        z-index: 2;
    }

    div.arrowed:after {
        border-bottom-color: #23b7e5;
        position: absolute;
        top: -20px;
        left: 20px;
        z-index: 1;
    }

    #dtable {
        height: 100%;
    }

    .dt-row-even {
        background: #f6f7f8;
    }

    .dt-header {
        background: #e0e7e8;
    }
</style>
<div class="app-content-body demand-content">
    <div class="wrapper-md">
        <div class="row" style="margin: 0px;">
            <div class="col-md-6">
                <div class="panel panel-default" style="margin-bottom: 0px;">
                    <div class="panel-heading">
                        <span class="font-bold">需求状态分布（近一个月）</span>
                    </div>
                    <div class="panel-body pie-panel-body">
                        <div style="height: 240px; text-align: center; padding-top: 12%;" ng-if="!info.isShowPie">
                            <i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color: #bbb;"></i>
                        </div>
                        <div ng-if="info.isShowPie" ui-jq="plot" ui-options="
                            {{info.pieData}},
                            {
                                series: { pie: { show: true, stroke: { width: 0 }, label: { show: false, threshold: 0.5 } } },
                                colors: ['{{app.color.primary}}','{{app.color.info}}','{{app.color.warning}}','{{app.color.success}}','{{app.color.danger}}', '#C4C4C4'],
                                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                                tooltip: true,
                                tooltipOpts: { content: '%s  %p.0%',  defaultTheme: false, shifts: { x: 0, y: 20 } }
                            }
                            " style="height:240px">
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6">
                <div class="panel panel-default" style="margin-bottom: 0px;">
                    <div class="panel-heading font-bold">
                        需求处理SLA（近一个月）
                        <div class="pull-right">
                            <div class="btn-group">
                                <label class="btn btn-default btn-xs" ng-model="info.radioModel" btn-radio="'ACCEPT'"
                                       ng-click="switchView('ACCEPT')">
                                    <i class="fa fa-check" ng-show="info.radioModel == 'ACCEPT'"></i>
                                    及时受理率
                                </label>
                                <label class="btn btn-default btn-xs" ng-model="info.radioModel" btn-radio="'COMPLETE'"
                                       ng-click="switchView('COMPLETE')">
                                    <i class="fa fa-check" ng-show="info.radioModel == 'COMPLETE'"></i>
                                    按时完成率
                                </label>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div style="height: 240px; text-align: center; padding-top: 12%;" ng-if="!info.isShowView">
                            <i class="fa fa-spinner fa-spin fa-3x fa-fw" style="color: #bbb;"></i>
                        </div>
                        <div ng-if="info.isShowView" ui-jq="plot" ui-options="
                            [
                                { data: {{info.splineData}}, points: { show: true, radius: 6}, splines: { show: true, tension: 0.45, lineWidth: 5, fill: 0 } }
                            ], 
                            {
                                colors: ['{{app.color.info}}'],
                                series: { shadowSize: 3 },
                                xaxis:{ 
                                    font: { color: '#ccc' },
                                    position: 'bottom',
                                    ticks: {{info.viewDay}}
                                },
                                yaxis:{ font: { color: '#ccc' }, min: 0 },
                                grid: { hoverable: true, clickable: true, borderWidth: 0, color: '#ccc' },
                                tooltip: true,
                                tooltipOpts: { content: '%x : %y 个',  defaultTheme: false, shifts: { x: 0, y: 20 } }
                            }
                            " style="height:240px">
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="row" style="margin: 0px;">
            <div class="col-sm-12">
                <tabset>
                    <tab heading="全部" ng-click="clickTab('ALL')"></tab>
                    <tab heading="待评审" ng-click="clickTab('NO_ACCEPT')"></tab>
                    <tab heading="待受理" ng-click="clickTab('DEPARTMENT_REVIEW')"></tab>
                    <tab heading="待确认" ng-click="clickTab('ACCEPT')"></tab>
                    <tab heading="已确认" ng-click="clickTab('CONFIRM')"></tab>
                    <tab heading="设计中" ng-click="clickTab('PRODUCT_DESIGN')"></tab>
                    <tab heading="研发中" ng-click="clickTab('DEVING')"></tab>
                    <tab heading="测试中" ng-click="clickTab('INTEGRATIONING')"></tab>
                    <tab heading="待评价" ng-click="clickTab('ONLINE')"></tab>
                    <tab heading="已延期" ng-click="clickTab('LATED')"></tab>
                    <tab heading="已回退" ng-click="clickTab('FALLBACK')"></tab>
                    <tab heading="已结束" ng-click="clickTab('CLOSED')"></tab>
                </tabset>
                <div>
                    <dtable id="dtable" options="options" rows="tableData" class="material"></dtable>
                </div>
            </div>
        </div>
    </div>
</div>
<winit-settings table-scope="info.tableScope" search-ele="settings.searchEle" date-radios="settings.dateRadios"
                select-list="settings.selectEle" ui-slt-list="settings.uiSltEle" btn-list="settings.btnEle"
                switch-list="settings.switchs">
</winit-settings>